<template>
  <div class="cowd">
      <div class="partLeft">
        <TablePart></TablePart>
      </div>
      <div class="partGap"></div>
      <div class="partRight">
        <EditedPart></EditedPart>
      </div>
  </div>
</template>

<script>
  import EditedPart from './EditedPart'
  import TablePart from './TablePart'
  export default {
    name: 'DeviceConfig',
    components: {TablePart, EditedPart},
    mounted: function () {
    },
    data() {
      return {
      }
    },
    methods: {
    }
  }
</script>

<style scoped>
  .cowd {
    width: 100%;
    padding: 5px;
  }

  /*2k: 2560x1440*/
  @media screen and (min-width: 1921px) {
    .cowd {
      height: 1250px
    }
  }

  /* 1080: 1920*1080 */
  @media screen and (max-width: 1920px)  and (min-width: 1601px) {
    .cowd {
      height: 960px;
    }
  }

  /* 1600: 1600*900  */
  @media screen and (max-width: 1600px) and (min-width: 1367px) {
    .cowd {
      height: 790px;
    }
  }

  /* 1366: 1366*678 */
  @media screen and (max-width: 1366px) {
    .cowd {
      height: 660px;
    }
  }
  .partLeft{
    width: 25%;
    height: 100%;
    float: left;
  }
  .partGap{
    float: left;
    height: 100%;
    width: 1%;
  }
  .partRight{
    float: left;
    width: 73%;
    height: 100%;
  }
</style>
